<template>
   <div class="nav">
      <!-- <img class="logo"
            src="https://img1.baidu.com/it/u=2003850994,4264889223&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526" alt="">
          -->
      <div class="">
         <img class="logo"
            src="https://img1.baidu.com/it/u=2003850994,4264889223&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526" alt="">
         <div v-for="(item, index) in menu" @click="onIndex = index" class="nav-item"
            :class="{ active: index === onIndex }"
            v-on:mouseenter="handleMouseEnter"
            >
            <router-link :to="item.path">
               <span class="icon" :class="item.icon" :style="{ color: item.color || '#629fff' }"></span>
               <div class="name">
                  {{ item.name }}
               </div>
            </router-link>
         </div>
      </div>
      <div class="showmenu" :style="showstyle">
         <div>
            自己猜的
         </div>
      </div>
<!-- 
      <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group >
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu> -->

   </div>
   <div class="container">
      <div class="header">
         <div class="left">
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
               <el-radio-button :value="false">expand</el-radio-button>
               <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
            <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>系统</el-breadcrumb-item>
               <el-breadcrumb-item>用户管理</el-breadcrumb-item>
               <el-breadcrumb-item>用户添加</el-breadcrumb-item>

            </el-breadcrumb>
         </div>
         <div class="user">
            <span class="name"> 周三</span>
            <img class="userimge"
               src="https://img1.baidu.com/it/u=2003850994,4264889223&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526"
               alt="">
         </div>
      </div>
      <div class="content">
         <router-view class="routerview"></router-view>
      </div>
   </div>
   <!-- <div class="conts">
  <div class="nav">
    <div>菜单</div>
    <div>菜单</div>
    <div>菜单</div>
    <div>菜单</div>
 </div>
 <div class="vieas">
    <router-view></router-view>
 </div>
 </div> -->
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
const onIndex = ref(0)
const menu = reactive([
   {
      name: '首页',
      path: '/',
      icon: 'icon-shebeiguanli',
      color: '#f00',
   },
   {
      name: '运营',
      path: '/detection',
      color: '#388e92',
      icon: 'icon-shebeiguanli',
      children: [
         {
            name: '运行情况',
            icon: 'icon-shebeiguanli',
            path: '/detection/data'
         },
         {
            name: '图片记录',
            icon: 'icon-shebeiguanli',
            path: '/detection/analysis'
         }, {
            name: '数据填报',
            icon: 'icon-shebeiguanli',
            path: '/detection/data'
         },
         {
            name: '开关机记录',
            icon: 'icon-shebeiguanli',
            path: '/detection/report'
         }
      ]
   },
   {
      color: '#f0f',
      name: '设备',
      icon: 'icon-shebeiguanli',
      path: '/detection'
   },
   {
      color: null,
      name: '设置',
      icon: 'icon-shebeiguanli',
      path: '/detection'
   }
])

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const showstyle = ref({
   display:"block",
   top:"10px"
})
const handleMouseEnter = (e) => {
   console.log(e)
   const rect = e.target.getBoundingClientRect();
  showstyle.value = {
     display:"block",
     top:rect.top+"px"
  }
}
</script>

<style scoped lang="less">
.showmenu{
   position: fixed;
   display: none;
   left: 80px;
   background: #fff;
   height: 100px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.pd-10 {
   padding: 10px;
}

.pd-20 {
   padding: 20px;
}

.logo {
   width: 40px;
   height: 40px;
   padding: 10px 10px;
   border-bottom: 1px solid #ebebeb;
}
.el-menu{
   border-right: none;
}
.nav {
   // width: 70px;
   position: fixed;
   z-index: 1;
   left: 10px;
   height: calc(100vh - 20px);
   top: 10px;
   border-radius: 0.5rem;
   background-color: #fff;
   overflow: auto;

   &::-webkit-scrollbar {
      //   display: none;
      width: 2px;
      /* 设置滚动条宽度 */
      background: #d3d3d3;
      /* 设置滑块背景颜色 */
   }

   &::-webkit-scrollbar-thumb {
      background-color: #adadad;
      /* 设置滑块背景颜色 */
      border-radius: 4px;
      /* 设置滑块圆角 */
   }

   /* 滚动条轨道hover状态样式 */
   &::-webkit-scrollbar-track:hover {
      background-color: #cacc3a;
      /* 设置轨道hover状态时的背景颜色 */
   }

   /* 滚动条滑块hover状态样式 */
   &::-webkit-scrollbar-thumb:hover {
      background-color: #ff0000;
      /* 设置滑块hover状态时的背景颜色 */
   }
}

.nav-item {
   text-align: center;
   padding: 5px 20px;
   cursor: pointer;

   span {
      color: rgb(180, 180, 180);

      font-size: 25px;
   }

   a {
      font-size: 14px;
      padding: 0;
      // color: #fff;

      text-decoration: none;

      .name {
         position: relative;
         top: -5px;
      }
   }

   &:hover {
      background-color: #9dace1;
      color: #fff;
      border-radius: 10px;

      span {
         color: #fff !important;

      }

      a {
         color: #fff;

      }

   }

   &.active {
      background-color: #7092ff;
      color: #fff;
      border-radius: 10px;

      span {
         color: #fff !important;
      }

      a {
         color: #fff;

      }

   }


}

.container {
   margin-left: 90px;
   padding-top: 10px;
   padding-bottom: 10px;
   height: calc(100vh - 20px);
   width: calc(100% - 100px);

   .header {
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      padding: 0 10px;
      font-size: 18px;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      background: #fff;

      .left {
         flex: 1%;
         padding: 20px 10px;
      }

      .user {
         display: flex;

         .name {
            margin-left: 10px;
            flex: 1%;
            font-size: 14px;
         }

         .userimge {
            margin: 10px;
            width: 30px;
            display: block;
            height: 30px;
            border-radius: 50%;
         }
      }

   }

   .content {
      margin: 10px 0;
      height: calc(100vh - 80px);
      // background: #fff;
      border-radius: 10px;
      overflow: auto;

      .routerview {}

      &::-webkit-scrollbar {
         //   display: none;
         width: 2px;
         /* 设置滚动条宽度 */
         background: #d3d3d3;
         /* 设置滑块背景颜色 */
      }

      &::-webkit-scrollbar-thumb {
         background-color: #adadad;
         /* 设置滑块背景颜色 */
         border-radius: 4px;
         /* 设置滑块圆角 */
      }

      /* 滚动条轨道hover状态样式 */
      &::-webkit-scrollbar-track:hover {
         background-color: #cacc3a;
         /* 设置轨道hover状态时的背景颜色 */
      }

      /* 滚动条滑块hover状态样式 */
      &::-webkit-scrollbar-thumb:hover {
         background-color: #ff0000;
         /* 设置滑块hover状态时的背景颜色 */
      }
   }
}
</style>
